<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="fetchAllUsers">获取所有的用户</button>
    <button id="addUser">增加用户</button>
    <button id="updateUser">更新用户</button>
    <button id="deleteUser">删除用户</button>
    <button id="fetchUser">获取单个用户</button>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //设置所有的axios共享的配置项
        axios.defaults.baseURL = 'http://localhost:8080';
        //设置所有的请求共享的请求头
        axios.defaults.headers.common['Authorization']= `Bearer token`;
        //设置发送post请求的时候的请求头 Content-Type application/json
        axios.defaults.headers.post['Content-Type']= 'application/json'
        axios.defaults.headers.put['Content-Type']= 'application/json';

        const axiosInstance = axios.create({
            baseURL:'http://localhost:8080',
            timeout:5
        });
        //给按钮绑定点击事件
        fetchAllUsers.addEventListener('click',()=>{
            //调用axios方法请求接口的地址，返回一个Promise,等响应成功之后会让Promise成功resolve
            axiosInstance({
               method:'GET',//请求的方法名
               //baseURL:'http://localhost:8080',
               url:'/users',//请求的URL地址 
               responseType:'json'
            }).then((response)=>{//成功响应之后会把响应对象封装好传给成功的回调函数
                //config代表请求的配置对象  data响应体 headers响应头 
                //request其实就是内部封装的XMLHttpRequest status状态码 statusText状态短语
                console.log(response.data);
            })
        });
        addUser.addEventListener('click',()=>{
            axiosInstance({
               method:'POST',//请求的方法名
               //baseURL:'http://localhost:8080',
               url:'/users',//请求的URL地址 
               data:{name:Date.now(),age:18},//传递请求体
               //headers:{'Content-Type':'application/json'}//指定请求体的类型内容为json字符串
            }).then((response)=>{//成功响应之后会把响应对象封装好传给成功的回调函数
                //config代表请求的配置对象  data响应体 headers响应头 
                //request其实就是内部封装的XMLHttpRequest status状态码 statusText状态短语
                console.log(response.data);
            })
        });
        updateUser.addEventListener('click',()=>{
            axiosInstance({
               method:'PUT',//请求的方法名
               //baseURL:'http://localhost:8080',//指定基本的url,或者说url地址的前缀
               url:'/users',//请求的URL地址 
               data:{name:Date.now(),age:20},//传递请求体
               //headers:{'Content-Type':'application/json'},
               params:{id:4}//传递查询参数
            }).then((response)=>{//成功响应之后会把响应对象封装好传给成功的回调函数
                //config代表请求的配置对象  data响应体 headers响应头 
                //request其实就是内部封装的XMLHttpRequest status状态码 statusText状态短语
                console.log(response.data);
            })
        });
        deleteUser.addEventListener('click',()=>{
            axiosInstance({
               method:'DELETE',//请求的方法名
               //baseURL:'http://localhost:8080',
               url:'/users',//请求的URL地址 
               params:{id:4}//传递查询参数
            }).then((response)=>{//成功响应之后会把响应对象封装好传给成功的回调函数
                //config代表请求的配置对象  data响应体 headers响应头 
                //request其实就是内部封装的XMLHttpRequest status状态码 statusText状态短语
                console.log(response.data);
            })
        });
        fetchUser.addEventListener('click',()=>{
            axiosInstance({
               method:'GET',//请求的方法名
               //baseURL:'http://localhost:8080',
               url:'/users',//请求的URL地址 
               params:{id:5}//传递查询参数
            }).then((response)=>{//成功响应之后会把响应对象封装好传给成功的回调函数
                //config代表请求的配置对象  data响应体 headers响应头 
                //request其实就是内部封装的XMLHttpRequest status状态码 statusText状态短语
                console.log(response.data);
            })
        });
    </script>
</body>
</html>